<template>
    <div id="orderInfo">
        <el-row>
            <el-col :span="8" class="rightBorder">
                <orderTittle>
                    <template #tittle="">用户信息</template>
                </orderTittle>
                <table class="tableCss">
                    <tr>
                        <td>收货人姓名：</td>
                        <td>{{orderInfo.user_name}}</td>
                    </tr>
                    <tr>
                        <td>收货人手机：</td>
                        <td>{{orderInfo.user_call}}</td>
                    </tr>
                    <tr>
                        <td>收货人地址：</td>
                        <td>{{orderInfo.user_location}}</td>
                    </tr>
                </table>
            </el-col>
            <el-col :span="8" class="rightBorder">
                <orderTittle>
                    <template #tittle="">订单信息</template>
                </orderTittle>
                <table class="tableCss">
                    <tr>
                        <td>订单渠道：</td>
                        <td>{{orderInfo.channel}}</td>
                    </tr>
                    <tr>
                        <td>订单ID：</td>
                        <td>{{orderInfo.id}}</td>
                    </tr>
                    <tr>
                        <td>配送方式：</td>
                        <td>{{orderInfo.delivery}}</td>
                    </tr>
                    <tr>
                        <td>快递公司：</td>
                        <td>{{orderInfo.delivery_company}}</td>
                    </tr>
                    <tr>
                        <td>快递单号：</td>
                        <td>{{orderInfo.delivery_id}}</td>
                    </tr>
                </table>
            </el-col>
            <el-col :span="8">
                <orderTittle>
                    <template #tittle="">订单进程</template>
                </orderTittle>
                <div class="block jincheng">
                    <el-timeline :reverse="reverse">
                        <el-timeline-item
                                v-for="(activity, index) in activities"
                                :key="index"
                                :timestamp="activity.timestamp">
                            {{activity.content}}
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import orderTittle from "./orderTittle";
    export default {
        name: "orderInfo",
        components:{
            orderTittle,
        },
        data(){
            return{
                reverse: false,
                activities: [{
                    content: '用户下单',
                    timestamp: '2020-3-20'
                }, {
                    content: '用户支付',
                    timestamp: '2020-3-20'
                }, {
                    content: '商家发货',
                    timestamp: '2020-3-20'
                }],
                orderInfo:[]
            }
        },
        methods:{
            getSummaries(param){
                console.log(param)
            }
        },
        created() {
            this.orderInfo=this.$store.state.orderStore.oneOrder;   //当前订单

        }
    }
</script>
<style scoped lang="less">
    #orderInfo{
        padding: 10px 15px 20px;
        background-color: #ffffff;
        .rightBorder{
            min-height: 200px;
            border-right: 1px solid gray;
        }
        .jincheng{
            width: 60%;
            margin: auto;
            text-align: left;
        }
        .tableCss{
            width: 100%;
            tr td:nth-of-type(1){
                width: 40%;
                font-size: 16px;
                line-height: 20px;
                text-align: right;
                padding-right: 10px;
            }
            tr td:nth-of-type(2){
                width: 60%;
                color: #ff9900;
                font-size: 13px;
                line-height: 20px;
                text-align: left;
                padding-left: 10px;
            }
        }
    }

</style>